import React from 'react';
import {Button, Form, Input, InputNumber, Modal} from 'antd';
import validator from '../../utils/validator';
import Constants from '../../utils/Constants';

const R = require('ramda');
const FormItem = Form.Item;
const productDetail = Form.create({ wrappedComponentRef: true })(class ProductDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false,
            dataSource: {}
        }
    }

    tempId = 1;

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({ open: false });
    }

    handleOpen = (disabled, dataSource) => {
        this.setState({ open: true, disabled, dataSource });
    }

    handleSave = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            values.cid = this.state.dataSource.cid;
            values.id = this.state.dataSource.id ? this.state.dataSource.id : Constants.TEMP_ID_PRE + this.tempId++;
            if (this.props.handleAddOrUpdateProduct) this.props.handleAddOrUpdateProduct(values);
            this.handleCancel();
        })
    }

    render() {
        let dataSource = R.isNil(this.state.dataSource) ? {} : this.state.dataSource;
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };

        let footer = [
            <Button key="save" size="large" loading={this.props.loading} onClick={this.handleSave.bind(this)} style={{ display: this.state.disabled ? 'none' : 'inline-block' }}>保存</Button>,
            <Button key="cancel" size="large" loading={this.props.loading} onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>
        ];

        return (
            <Modal maskClosable={false} visible={this.state.open} title={"产品详情"} width={600}
                onCancel={this.handleCancel.bind(this)} footer={footer} closable={false}>
                <Form>
                    <FormItem {...formItemLayout} label="产品名称" hasFeedback>
                        {getFieldDecorator('productName',
                            {
                                rules: [{ required: true, message: '请输入产品名称' }],
                                initialValue: dataSource.productName
                            })(
                            <Input style={{ width: "100%" }} disabled={this.state.disabled} maxLength="50" />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="产品数量" hasFeedback>
                        {getFieldDecorator('productQuantity',
                            {
                                rules: [
                                    { required: true, message: '请输入产品数量！' },
                                    { pattern: validator.DECIMAL4.pattern, message: validator.DECIMAL4.message }
                                ],
                                initialValue: dataSource.productQuantity
                            })(

                            <InputNumber disabled={this.state.disabled} min={0} max={99999999999999} style={{ width: '100%' }} />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="产品规格" hasFeedback>
                        {getFieldDecorator('productModel',
                            {
                                initialValue: dataSource.productModel
                            })(
                            <Input maxLength="100" style={{ width: "100%" }} disabled={this.state.disabled} />
                            )}
                    </FormItem>
                    <FormItem {...formItemLayout} label="备注" hasFeedback>
                        {getFieldDecorator('memo',
                            {
                                initialValue: dataSource.memo
                            })(
                            <Input.TextArea disabled={this.state.disabled} maxLength="200" autosize={true} />
                            )}
                    </FormItem>
                </Form>
            </Modal>
        );
    }
})

export default productDetail;

